import React, { Component, PropTypes } from "react";
import { connect } from 'react-redux'
import { Alert, Popover, Tag } from 'antd'
import { messages, queryCurrencyPrecision } from "share/common";
import Condition from "components/condition";
import constants from "share/constants";
import menuRoute from "routes/menuRoute";
const { If } = Condition;

@connect(mapStateToProps)
class SlideLoanLeft extends Component {

  onClickApplication = () => {
    const { info } = this.context;
    let reference = info.referenceApplication;
    window.open(
      (window.ISIE9 ? "#" : "") +
      menuRoute.getRouteItem('request-detail').url
        .replace(':formOID', reference.formOID)
        .replace(':applicationOID', reference.applicationOID) +
      '?from=request'
    );
  };

  render() {
    const { info, isShowHangUp } = this.context;
    let currencyPrecision = queryCurrencyPrecision(info.currencyCode);
    return (
      <div className='slide-expense-report-detail-header'>
        {
          info.loanBillLabelDTOs && info.loanBillLabelDTOs.map(item => (
            <Alert
              type={item.level === 'WARN' ? 'warning' : 'error'}
              message={item.name}
              showIcon
              style={{ marginBottom: '10px' }}
              description={item.toast}
            />
          ))
        }
        <If value={isShowHangUp}>
          <Alert
            type='warning'
            message={messages('finance-1.key35')/*暂挂*/}
            showIcon
            style={{ marginBottom: '10px' }}
          />
        </If>
        <If value={info.deliveryCode}>
          <div className='slide-document-info-row'>
            {messages('finance-1.key34')/*快递单号*/}：{info.deliveryCode}
          </div>
        </If>
        <div className='slide-expense-report-detail-header-form'>
          {info.formName}
          {constants.documentStatus.map(item => {
            if(
              (item.value === String(info.status) && info.rejectType === 1000) ||
              item.value === String(info.status * 10000 + info.rejectType)
            ) {
              return <Tag
                color={item.color}
                className='slide-expense-report-detail-header-form-status'
              >
                {item.text}
              </Tag>
            }
          })}
        </div>
        <If value={info.nodeName}>
          <div className="slide-expense-report-detail-header-nodeName">
            <Popover content={info.nodeName} placement="topLeft">{info.nodeName}</Popover>
          </div>
        </If>
        <div className='slide-expense-report-detail-header-amount'>
          {info.currencyCode}&nbsp;
          {this.filterMoney(info.currencyAmount, currencyPrecision)}
        </div>
        <If value={info.referenceApplication && info.referenceApplication.businessCode}>
          <div className='slide-expense-report-detail-relative'>
            <div
              className='slide-expense-report-detail-relative-item'
              onClick={this.onClickApplication}
            >
              {messages('finance-1.key49')/*关联申请单*/}：{info.referenceApplication ? info.referenceApplication.businessCode : '-'}
            </div>
          </div>
        </If>
      </div>
    )
  }

  static contextTypes = {
    info: PropTypes.object,
    isWaitForAudit: PropTypes.bool,
    isShowHangUp: PropTypes.bool
  };

}

function mapStateToProps(state) {
  return ({
    company: state.login.company,
    loginUser: state.login.loginUser
  })
}

export default SlideLoanLeft
